define(['jquery', 'loadcss'], function($, loadcss, motail) {
    loadcss('../src/propments/css/modal.css', document.body);

    //
    var modal_btn = $(".hc-modal");
    var modal_id = 1; //模态框的序号

    var config = {
        maskClose: true,
    };

    //处理模态框
    modal_btn.each(function(index, ele) {
        $(this).on('click', function() {
            var option = setOption(this);

            if ($(this).attr("maskClose") == 'true') {
                config.maskClose = true;
            }
            if ($(this).attr("maskClose") == 'false') {
                config.maskClose = false;
            }
            //console.log(config)

            var curr_modalid = openModal(option); //创建模态框主体
            setBodyContent(curr_modalid, option); //生成主体内容
            //获取所有对象
            var tmp_id = $("#" + curr_modalid);
            var obj_modal = setModalObject(tmp_id); //模态框内部的所有对象

            initCss(option, obj_modal); //设置模态框css
            bindEvent(option, obj_modal); //绑定事件

        }.bind(this));
    });

    //生成模态框内容
    function setBodyContent(id, option) {
        var obj = $("#" + id).find(".modal-body");
        if (option.content.indexOf('http') == 0 || option.content.indexOf('https') == 0) {
            //此时是一个地址，需要发送ajax请示
            var url = option.content;
            $.get(url, function(res) {
                //console.log(res)
                var html = res[0].name;
                obj.html(html);
            });
            //$.get();
        } else {
            obj.html(option.content);
        }
    }

    //生成模态框
    function openModal(option) {
        var id = 'modal' + modal_id;
        modal_id++;
        //创建一个遮罩
        if (option.type == '1') {
            if ($(".hc-modal-bg").length == 0) {
                $("body").append('<div class="hc-modal-bg"></div>');
            } else {
                $(".hc-modal-bg").show();
            }
        }

        //创建模态窗口
        var modal_window_html = '<div class="hc-modal-window" id=' + id + '>';
        //正常模态框，就存在这个关闭按钮
        if (option.type == '1') {
            modal_window_html += '<span class="modal-close">X</span>';
        }

        if (option.title != '') {
            modal_window_html += '<h1 class="modal-title">' + option.title + '</h1>';
        }
        modal_window_html += '<div class="modal-body"></div>';
        //按钮
        if ((option.cancel != '' || option.yes != '') && option.type == '1') {
            modal_window_html += '<div class="hc-modal-btn">';
            if (option.cancel !== '') {
                modal_window_html += '<button class="modal-cancel">关闭</button>';
            }
            if (option.ok !== '') {
                modal_window_html += '<button class="modal-yes">确定</button>';
            }
            modal_window_html += '</div>';
        }
        modal_window_html += '</div>';
        $("body").append(modal_window_html);
        return id;
    }

    //设置模态框 CSS
    function initCss(option, obj) {
        //设置 modal-window  的宽，及高
        if (option.type == '1') {
            obj.window.css({ width: option.w + 'px', height: option.h + 'px', 'margin-top': -(option.h / 2) + 'px', 'margin-left': -(option.w / 2) + 'px' });
        } else if (option.type == '2') {
            //设置迷你模态框的样式

            var w = option.w || obj.body[0].offsetWidth,
                h = option.h || obj.body[0].clientHeight;
            obj.window.css({ 'background-color': '#efefef', width: w + 'px', height: h + 'px', 'margin-top': -(h / 2) + 'px', 'margin-left': -(w / 2) + 'px' });
            obj.body.css({ 'text-align': 'center' });
        }
        //设置modal-body 的高
        var modal_body_h = option.h;
        if (option.title) {
            modal_body_h -= 40;
        }
        if (option.cancel || option.yes) {
            modal_body_h -= 40;
        }
        obj.body.css('height', modal_body_h + 'px');




    }

    //绑定事件
    function bindEvent(option, obj) {
        //关闭  X
        obj.close.on('click', function() {
            $(".hc-modal-bg").hide();
            obj.window.remove();
        });

        //点击遮罩也关闭
        if (config.maskClose === true) {
            $(".hc-modal-bg").on('click', function() {
                obj.close.trigger('click')
            });
        }

        //关闭按钮
        obj.btn_cancel.on('click', function() {
            obj.close.trigger('click')
            eval("var callback = " + option.cancel);
            //new Function(option.cancel + "()")();
            if (typeof callback == 'function') {
                callback();
            }
        });

        //确定按钮
        obj.btn_yes.on('click', function() {
            console.log(option.ok);
            obj.close.trigger('click');
            eval("var callback = " + option.ok);
            if (typeof callback == 'function') {
                callback();
            } else {

            }
        });

        //自动关闭模态框
        if (option.type == '2') {
            setTimeout(function() {
                obj.window.remove();
            }, option.time);
        }

    }

    //打开一个模态框 
    function open(obj) {
        var option = setOption(obj, 2);
        var curr_modalid = openModal(option); //创建模态框主体

        //获取所有对象
        var tmp_id = $("#" + curr_modalid);
        var obj_modal = setModalObject(tmp_id);

        initCss(option, obj_modal); //设置模态框css
        bindEvent(option, obj_modal); //绑定事件
    }

    //获取配置，或都修改配置
    function setModal(key, value) {
        if (config[key] == undefined) {
            console.log('没有这个配置项');
            return -1;
        }
        //判断有没有传递 value
        if (value) {
            config[key] = value;
            return true;
        } else {
            return config[key]
        }
    }

    //处理属性,obj (要么是this,要么是一个对象)， type = 1 时是this, 2 时为对象
    function setOption(obj, type = 1) {
        var option = {};
        if (type == 1) {
            option.title = $(obj).attr("title") || ''; //标题
            option.content = $(obj).attr("content") || '请提供内容'; //内容 
            option.cancel = $(obj).attr("cancel") || ''; //取消回调函数名称
            option.ok = $(obj).attr("ok") || ''; //确定回调函数名称
            option.w = $(obj).attr("width") || ''; //模态框的宽度，默认400
            option.h = $(obj).attr("height") || ''; //模态框的高度，默认400
            option.type = $(obj).attr('type') || '1'; //模态框类型， 1 表示正常模态框，2表示 消息框
            option.time = $(obj).attr('time') || 3000; //多长时间后自动关闭模态框 
        }
        if (type == 2) {
            option.title = obj.title || ''; //标题
            option.content = obj.content || '请提供内容'; //内容 
            option.cancel = obj.cancel || ''; //取消回调函数名称
            option.ok = obj.ok || ''; //确定回调函数名称
            option.w = obj.w || ''; //模态框的宽度，默认400
            option.h = obj.h || ''; //模态框的高度，默认400
            option.type = obj.type || '1'; //模态框类型， 1 表示正常模态框，2表示 消息框
            option.time = obj.time || 3000; //多长时间后自动关闭模态框
        }

        return option;
    }

    //选择模态框对象
    function setModalObject(id) {
        var obj_modal = {}; //模态框内部的所有对象
        obj_modal.window = id; //弹框主体
        obj_modal.title = id.find(".modal-title"); //标题容器
        obj_modal.body = id.find(".modal-body"); //内容容器
        obj_modal.close = id.find('.modal-close'); //关闭
        obj_modal.btn_cancel = id.find(".modal-cancel"); //取消按钮
        obj_modal.btn_yes = id.find(".modal-yes"); //确认按钮
        return obj_modal;
    }

    return {
        open: open,
        setModal: setModal,
    }
});




/*下面的内容是动态创建的 -->
<div class="hc-modal-bg"></div>
<div class="hc-modal-window" id="modal01">
    <span class="modal-close">X</span>
    <h1 class="modal-title">模态框标题</h1>
    <div class="modal-body">模态框的正文</div>
    <div class="hc-modal-btn">
        <button class="modal-cancel">关闭按钮</button>
        <button class="modal-yes">确定</button>
    </div>
</div> */